<script setup>
import { computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { usePlayListStore } from '@/stores/playListStore'
import { useCookieStore } from '@/stores/cookieStore'
import SongListCard from '@/components/SongListCard/SongListCard.vue'
import { ElMessage } from 'element-plus'

const usePlayList = usePlayListStore()
const useCookie = useCookieStore()
const router = useRouter()

// 进入用户喜欢列表
const getLikeList = () => {
  if (useCookie.cookie.cookie) {
    router.push({
      name: 'playList',
      params: {
        id: usePlayList.likeList.id
      }
    })
  } else {
    ElMessage({
      duration: 5000,
      showClose: true,
      message: '请登录账号获取完整体验',
      type: 'warning',
    })
  }
}

// 获取首页的推荐歌单
const personalizedList = computed(() => usePlayList.recommendList.slice(0, 5))


// 当登录状态改变时，重新获取
watch(() => useCookie.cookie.cookie, () => {
  usePlayList.getRecommendList()
}, { immediate: true })

</script>

<template>
  <div class="home-song-list">
    <div class="title">
      <h1>歌单</h1>
      <h3>
        <RouterLink to="/recommendSongList">更多></RouterLink>
      </h3>
    </div>

    <!-- 骨架屏 -->
    <el-space direction="vertical" alignment="flex-start">
      <el-skeleton :loading="usePlayList.isShowSkeleton" animated :count="6">
        <!-- 骨架屏 DOM -->
        <template #template>
          <div>
            <el-skeleton-item variant="image" class="skeleton-song-list" />
            <el-skeleton-item variant="p" class="skeleton-song-list-name" />
          </div>
        </template>
        <!-- / 骨架屏 DOM -->

        <!-- 业务 DOM -->
        <template #default>
          <div class="list-card-container">
            <div class="collect-box">
              <div class="collect" @click="getLikeList">
                <p class="name">我的收藏</p>
              </div>
              <p>我的收藏</p>
            </div>
            <template v-for="song in personalizedList" :key="song.id">
              <Router-link :to="`/playList/${song.id}`">
                <SongListCard :song="song" />
              </Router-link>
            </template>
          </div>
        </template>
        <!-- / 业务 DOM -->
      </el-skeleton>
    </el-space>
    <!-- / 骨架屏 -->
  </div>
</template>

<style scoped lang='scss'>
.home-song-list {
  .title {
    margin-top: 30px;
    line-height: 60px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
  }

  h1 {
    font-size: 24px;
  }

  h3 {
    letter-spacing: 1px;
    cursor: pointer;
  }

  .list-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 210px;
    overflow: hidden;

    .collect-box {

      p {
        margin-top: 10px;
        font-weight: bold;
        letter-spacing: 1px;
      }

      .collect {
        height: 180px;
        width: 180px;
        background-image: url('@/assets/collect.jpg');
        background-size: cover;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        .name {
          line-height: 30px;
          text-align: center;
          color: #fff;
          font-size: 16px;
          background-color: rgb(255, 255, 255, 0.3);
        }
      }
    }
  }

  .skeleton-song-list {
    height: 180px;
    width: 180px;
    border-radius: 5px;
  }

  .skeleton-song-list-name {
    height: 20px;
    width: 120px;
    margin-top: 10px;
  }


  :deep(.el-space) {
    display: block;
  }

  :deep(.el-skeleton) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 210px;
    overflow: hidden;
  }
}
</style>